<template>
  <div :class="[type === 'fixed' ? 'fixed' : '', 'nav-mode']">
    <div class="nav-wrap w">
      <div class="logo">
        <h1>
          <a class="a-logo" href="/" title="JiYi Electronics">Jiyi electronic</a>
        </h1>
      </div>
      <template v-if="language == 'EN'">
        <ul class="nav-title">
          <li v-for="(item, index) in navListEN" :key="index">
            <nuxt-link :noPrefetch="true" :to="item.url" class="nav-link">
              <div class="nav_container">
                {{ item.text }}
              </div>
            </nuxt-link>
          </li>
        </ul>
      </template>
      <template v-if="language == 'CN'">
        <ul class="nav-title">
          <!-- <li v-for="(item, index) in navListCN" :key="index">
            <div class="nav_container">
              <nuxt-link :noPrefetch="true" :to="item.url" class="nav-link">{{
    item.text }}
              </nuxt-link>
            </div>
          </li> -->
          <li v-for="(item, index) in navListCN" :key="index">
            <nuxt-link :noPrefetch="true" :to="item.url" class="nav-link">
              <div class="nav_container">
                {{ item.text }}
              </div>
            </nuxt-link>
          </li>


        </ul>
      </template>
      <ul class="contact">
        <li>
          <a class="right" href="#">
            <img src="../static/ic/phone@2x.png" alt="">
            <span>17353817801</span>
          </a>
        </li>
        <li>
          <a class="right" href="#">
            <img src="../static/ic/email@2x.png" alt="">
            <span>bailey@jiyitechic.com</span>
          </a>
        </li>
      </ul>
      <ul class="right-language">
        <li>
          <p @click="languageClick('EN')" class="language" :class="language == 'EN' ? 'enActivate' : ''">EN</p>
        </li>
        <li>
          <P @click="languageClick('CN')" class="language" :class="language == 'CN' ? 'enActivate' : ''">中文</P>
        </li>
      </ul>



    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    type: {
      type: String,
      default: "fixed",
    },
    active: {
      type: Number,
      default: 0,
    },
    language: {
      type: String,
      default: 'EN',
    },
  },
  methods: {
    languageClick(type) {
      this.$emit('languageClick', type)
    },

  },
  data() {
    return {
      navListCN: [
        { text: "首页", value: "0", url: "/",},
        { text: "关于我们", value: "1", url: "/aboutUs" },
        { text: "产品与服务", value: "2", url: "/productService" },
        { text: "品牌", value: "3", url: "/breed" },
        { text: "库存", value: "4", url: "/stock" },
        { text: "联系我们", value: "5", url: "/contactUs" },
      ],
      navListEN: [
        { text: "Home", value: "0", url: "/", },
        { text: "About us", value: "1", url: "/aboutUs" },
        { text: "Products and services", value: "2", url: "/productService" },
        { text: "Brand", value: "3", url: "/breed" },
        { text: "Stock", value: "4", url: "/stock" },
        { text: "Contact us", value: "5", url: "/contactUs" },
      ],
    };
  },
  computed: {
    ...mapState(["status"]),
  },
  
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../static/font/iconfont.woff2?t=1708347338261') format('woff2'),
    url('../static/font/iconfont.woff?t=1708347338261') format('woff'),
    url('../static/font/iconfont.ttf?t=1708347338261') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nav-mode {
  background: #fff;

  .w {
    width: 1600px;
    margin: 0 auto;
  }



  .nav-wrap {
    height: 84px;
    position: relative;

    .logo {
      width: 99px;
      height: 58px;
      position: absolute;
      // background-color: #0964bf;
      top: -6px;
      left: 50px;
      font-size: 0;

      .a-logo {
        height: 90px;
        width: 150px;
        display: block;
        // background: url(../static/ic/BgSub_logo.png) no-repeat;
        background: url(../static/ic/logo11.png) no-repeat;
        background-size: 100%;
        font-size: 0px;
      }
    }

    .nav-title {
      float: left;
      margin-left: 213px;
      width: 670px;
      padding: 31px 0;
      display: flex;
      // align-items: space-between;
      justify-content: space-between;

      li {
        .nav_container {

            height: 22px;
            font-family: Poppins;
            color: #333333;
            font-size: 16px;
            white-space:nowrap;
        }



      }



    }

    .contact {
      width: 350px;
      float: left;
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      margin-left: 180px;

      li {
        width: 180px;
        height: 24px;

        .right {
          color: rgba(51, 51, 51, 1);

          img {
            width: 24px;
            height: 24px;
          }

          span {
            display: inline-block;
            width: 124px;
            height: 24px;
            line-height: 24px;
            font-family: Poppins;
            color: #333333;
            font-size: 14px;
            margin-left: -2px;
          }
        }
      }
    }

    .right-language {
      display: none;
      float: left;
      width: 100px;
      // display: flex;
      justify-content: space-evenly;
      margin-top: 30px;
      margin-right: 36px;

      li {
        width: 30px;
        height: 24px;

        p {
          width: 30px;
          height: 24px;
          font-family: Poppins;
          color: #666666;
          font-size: 14px;
          line-height: 24px;
        }
      }

      .enActivate {
        font-family: Poppins;
        color: #0964bf;
        font-size: 14px;
        font-weight: 600;
      }


    }

  }

  .nuxt-link-exact-active .nav_container {
    text-align: center;
    font-family: Poppins;
    color: rgba(9, 100, 191, 1);
    font-size: 16px;
    font-weight: 700;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      width: 16px;
      height: 4px;
      background: #0964bf;
      border-radius: 2px;
      bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    }
  }


}

.nav-mode.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  .nav-wrap {
    .nav-link {
      color: #302c2c;
    }
  }
}
</style>
